<template>
  <div>
    <button @click="reverse">Reverse</button>
    <p ref="p">{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    msg: 'Hello world!'
  }),
  methods: {
    reverse() {
      this.msg = this.msg.split('').reverse().join('')
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    // 可以访问 data 中的数据
    console.log('created', this.msg, this.$refs.p && this.$refs.p.innerHTML)
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    // 可以访问 DOM
    console.log('mounted', this.msg, this.$refs.p.innerHTML)
  },
  beforeUpdate() {
    // 数据发生变化，DOM 更新前
    console.log('beforeUpdate', this.msg, this.$refs.p.innerHTML)
  },
  updated() {
    // 数据发生变化，DOM 更新后
    console.log('updated', this.msg, this.$refs.p.innerHTML)
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>
